<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">订单发货</div>
						<div><el-button type="success" class="book-add" @click="dialogVisible = true">订单查询</el-button></div>
					</el-header>
					<el-table :data='list' style='width: 100%;' max-height="480" border v-loading="isLoading">
						<el-table-column prop="ordid" label="订单号" />
						<el-table-column prop="phone" label="电话" />
						<el-table-column prop="nickname" label="收货人" />
						<el-table-column prop="amount" label="总价" />
						<el-table-column label="是否付款">
							<template #default="scope">
								<span :class="{ nopay: scope.row.ispay == 0 }">{{
									ftpay(scope.row.ispay)
								}}</span>
							</template>
						</el-table-column>

						<el-table-column prop="shipno" label="发货单号" />
						<el-table-column prop="addr" label="发货地址" />
						<el-table-column label="下单时间">
							<template #default="scope">
								{{ ftime(scope.row.tcreate) }}
							</template>
						</el-table-column>
						<el-table-column label="操作" width="200">
							<template #default="scope">
								<el-popover placement="left" :width="500" trigger="click">
									<template #reference>
										<el-button type="info" @click="detail(scope.row.ordid)" class="def">明细</el-button>
									</template>

									<el-aside>
										{{ scope.row.ordid }}#订单详情&nbsp;&nbsp;发往:{{
											scope.row.addr
										}}
									</el-aside>
									<el-table :data="ordid_list">
										<el-table-column label="图片">
											<template #default="scope">
												<img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" />
											</template>
										</el-table-column>
										<el-table-column label="商品名称" prop="name" />
										<el-table-column label="商品价钱" prop="price" />
										<el-table-column label="商品数量" prop="num" />
										<el-table-column label="小计">
											<template #default="scope">
												{{ scope.row.price * scope.row.num }}
											</template>
										</el-table-column>
									</el-table>
								</el-popover>
								<el-button type="primary" v-if="scope.row.ispay == 1"
									@click="getOrdid(scope.row.ordid), dialogVisible2 = true" class="goods">发货</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>

			<el-dialog v-model="dialogVisible" width="40%" title="订单查询">
				<el-form ref="form" label-width="150px" :model="formData">
					<el-form-item label="从:">
						<el-input style="width: 300px;" type="date" v-model.lazy.trim="formData.tstart"></el-input>
					</el-form-item>
					<el-form-item label="至:">
						<el-input style="width: 300px;" type="date" v-model.lazy.trim="formData.tend"></el-input>
					</el-form-item>
					<el-form-item label="收货电话:">
						<el-input style="width: 300px;" v-model.lazy.trim="formData.phone"></el-input>
					</el-form-item>
					<el-form-item label="收货人:">
						<el-input style="width: 300px;" v-model.lazy.trim="formData.nickname"></el-input>
					</el-form-item>
				</el-form>
				<template #footer>
					<span>
						<el-button @click="searchData()" type="primary">查询</el-button>
					</span>
				</template>
			</el-dialog>


			<el-dialog v-model="dialogVisible2" title="发货确认" width="30%">
				<el-form class="demo-form-inline" label-position="left">
					<el-form-item label="发货单号">
						<el-input v-model.lazy.trim="divlivery.shipno" placeholder="请输入发货单号" />
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible2 = false">取消</el-button>
						<el-button type="primary" @click="shipments">
							确认发货
						</el-button>
					</span>
				</template>
			</el-dialog>

		</div>
		<!-- 分页 -->
		<div class="book-pagination">
			<el-pagination background layout="prev, pager, next" :total="total" :page-size='num' @current-change='listbut'>
			</el-pagination>
		</div>

	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
export default {
	name: 'Adm2',
	data () {
		return {
			isLoading: false,
			list: [],
			ordid_list: [],
			total: 0,
			num: 10,
			dialogVisible: false,
			dialogVisible2: false,
			showLoading: showLoading,
			id: 0,
			page: 1,
			formData: {
				ispay: 0,
				tstart: '',
				tend: '',
				phone: '',
				nickname: ''
			},
			divlivery: {
				shipno: '',
				shipname: ''
			}
		}
	},
	methods: {

		//点击切换到指定页数
		listbut (x) {
			this.page = x;
			this.isLoading = true;
			let pages = `/api/adm/ord/findOrdInfo/${x - 1}/10`;
			this.axios.post(pages, {
				headers: { 'Content-Type': 'application/json' }
			})
				.then((res) => {
					this.list = res.data.data.orders;
					this.total = res.data.data.total;
					this.showLoading();
					console.log(this.list);

				})
				.catch((error) => {
					console.log(error);
				});
		},

		//订单数据
		getData () {
			this.isLoading = true;
			let start = 0;
			let num = 10;
			this.axios.post(`/api/adm/ord/findOrdInfo/${start}/${num}`, {
				headers: { 'Content-Type': 'application/json' }
			})
				.then((res) => {
					if (res.status === 200) {
						this.list = res.data.data.orders;
						this.total = res.data.data.total;
						this.showLoading();

					}
				})
				.catch((error) => {
					console.log(error);
				});
		},

		detail (id) {
			this.id = id;
			this.axios.get(`/api/adm/ord/findItemInfoByOrdid/${this.id}`)
				.then((res) => {
					if (res.status === 200) {
						this.ordid_list = res.data.data;
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},

		searchData () {
			// 判断输入框是否为空
			if (this.formData.tstart == '' && this.formData.tend == '') {
				this.$message({
					message: '请输入查询条件',
					type: 'warning'
				});
				return;
			}
			let form = this.formData;
			let data = {
				ispay: form.ispay,
				tstart: new Date(form.tstart).getTime(),
				tend: new Date(form.tend).getTime(),
				phone: form.phone,
				nickname: form.nickname,
			};

			this.isLoading = true;
			this.axios.post(`/api/adm/ord/findOrdInfo/${this.page - 1}/${this.num}`, data)
				.then((res) => {
					if (res.status === 200) {
						this.list = res.data.data.orders;
						this.showLoading();
					}
				})
				.catch((error) => {
					console.log(error);

				});


		},

		//订单发货
		shipments () {

			// 判断输入框是否为空
			if (this.divlivery.shipno == '') {
				this.$message({
					message: '请输入发货单号',
					type: 'warning'
				});
				return;
			}

			let data = {
				ordid: this.divlivery.ordid,
				shipno: this.divlivery.shipno,
			};

			this.axios.post(`/api/adm/ord/addShip`, data)
				.then((res) => {
					if (res.status === 200) {
						this.$message({
							message: '发货成功',
							type: 'success'
						});
						this.dialogVisible2 = false;
						this.getData();
					}
				})
				.catch((error) => {
					console.log(error);
				});

		},


		getOrdid (id) {
			this.divlivery.ordid = id;
		},


	},

	computed: {
		//过滤时间
		ftime () {
			return function (x) {
				let datas = new Date(x);
				let year = datas.getFullYear();
				let month = datas.getMonth() + 1;
				let day = datas.getDate();
				return `${year}-${month}-${day}`;
			};
		},
		//过滤付款
		ftpay () {
			return function (x) {
				return x == 0 ? (x = "未付") : (x = "已付");
			};
		},
	},

	created () {
		this.getData();
	}
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}


/* 未付款,加载该样式 */
.nopay {
	color: rgb(139, 0, 0) !important;
}

.el-popover img {
	width: 40px;
	height: 40px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}
</style>





